<template>
  <div class="main">
    <div class="title">日志管理</div>
    <div style="margin-top:28.88px;">
      <a-radio-group v-model="LogType" style="margin-bottom: 16px">
        <a-radio-button value="Operation">操作管理</a-radio-button>
        <a-radio-button value="Login">登录管理</a-radio-button>
      </a-radio-group>
    </div>
    <div class="headerInput">
      <!-- <a-form layout="inline" style="width:100%"> -->
      <a-form layout="inline">
        <a-form-item label="NTID">
          <a-input placeholder v-model.trim="NTID" allowClear class="w200" />
        </a-form-item>
        <a-form-item label="用户名">
          <a-input placeholder v-model.trim="UserName" allowClear class="w200" />
        </a-form-item>
        <a-form-item label="操作模块" v-if="LogType==='Operation'">
          <a-input placeholder v-model.trim="OperationModule" allowClear class="w200" />
        </a-form-item>
        <a-form-item label="操作类型" v-if="LogType==='Operation'">
          <a-input placeholder v-model.trim="OperationType" allowClear class="w200" />
        </a-form-item>
        <a-form-item :label="label">
          <a-range-picker @change="onDateChange" v-model="selectDateMoment" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="Reset">Reset</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="search">Search</a-button>
        </a-form-item>
      </a-form>
    </div>

    <div class="tableSection">
      <a-table
        :data-source="tableData"
        :pagination="false"
        :rowKey="(record, index) => index"
        v-if="LogType==='Operation'"
      >
        <a-table-column key="NTID" title="NTID" data-index="NTID" />
        <a-table-column key="UserName" title="用户名" data-index="UserName" />
        <a-table-column key="InterfaceName" title="操作模块" data-index="InterfaceName" />
        <a-table-column key="LogType" title="操作类型" data-index="OperationType" />
        <a-table-column key="CreateTime" title="操作时间" data-index="CreateTime" />
      </a-table>
      <a-table
        :data-source="tableData"
        :pagination="false"
        v-if="LogType==='Login'"
        :rowKey="(record, index) => index"
      >
        <a-table-column key="NTID" title="NTID" data-index="NTID" />
        <a-table-column key="UserName" title="用户名" data-index="UserName" />
        <a-table-column key="CreateTime" title="登陆时间" data-index="CreateTime" />
      </a-table>
      <a-pagination
        v-model="currentPage"
        show-size-changer
        show-quick-jumper
        :page-size.sync="pageSize"
        :total="totalCount"
        @showSizeChange="changePage"
        @change="changePage"
        class="pagination"
      />
    </div>
  </div>
</template>

<script>
import { parse } from 'querystring'
export default {
  data() {
    return {
      searchText: '',
      tableData: [],
      pageSize: 10,
      totalCount: 0,
      currentPage: 1,
      modalVisiable: false,
      labelCol: {
        xs: { span: 28 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      ModalTitle: '',
      doType: '',
      LogType: 'Operation',
      selectDateMoment: [],
      selectDateList: [],
      DStartDate: '',
      DEndDate: '',
      DDateList: [],
      NTID: '',
      UserName: '',
      OperationModule: '',
      OperationType: '',
      label: '操作日期',
    }
  },
  watch: {
    LogType(val) {
      console.log('this.LogType :>> ', this.LogType)
      this.Reset()
      this.getTableData()
      if (val === 'Login') {
        this.label = '登陆日期'
      } else {
        this.label = '操作日期'
      }
    },
    doType(val) {
      this.debounce()
    },
    OperationModule() {
      this.debounce()
    },
    NTID() {
      this.debounce()
    },
    UserName() {
      this.debounce()
    },
    DDateList() {
      this.debounce()
    },
    OperationType() {
      this.debounce()
    },
  },
  created() {
    this.getTableData()
  },
  methods: {
    debounce() {
      setTimeout(() => {
        this.getTableData()
      }, 800)
    },
    Reset() {
      this.NTID = ''
      this.UserName = ''
      this.OperationModule = ''
      this.selectDateMoment = []
      this.OperationType = ''
      this.DStartDate = ''
      this.DEndDate = ''
      this.DDateList = ''
    },
    onDateChange(date, dateString) {
      console.log(date, dateString)
      this.selectDateMoment = date
      this.selectDateList = dateString
      if (dateString[0] && dateString[1]) {
        this.DStartDate = dateString[0] + ' 0:00:00'
        this.DEndDate = dateString[1] + ' 23:59:59'
        this.DDateList = ''
        this.DDateList = '[' + this.DStartDate + ',' + this.DEndDate + ']'
      } else {
        this.DDateList = ''
      }

      console.log('this.DDateList :>> ', this.DDateList)
    },
    changePage(current, pageSize) {
      this.currentPage = current
      this.pageSize = pageSize
      this.getTableData()
    },
    search() {
      this.currentPage = 1
      this.getTableData()
    },
    clickKindTable(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },

    getTableData() {
      const that = this
      const a = {
        method: 'SysOperationLog_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        limit: this.pageSize,
        language: window.language || 1,
        orderByList: 'CreateTime desc',
        datas: {
          LogType: this.LogType ? this.LogType : '', //登陆日志
          NTID: this.NTID ? `%${this.NTID}%` : '',
          UserName: this.UserName ? `%${this.UserName}%` : '',
          InterfaceName: this.OperationModule
            ? `%${this.OperationModule}%`
            : '',
          OperationType: this.OperationType ? `%${this.OperationType}%` : '',
          CreateTime: this.DDateList.length > 0 ? this.DDateList : '',
        },
      }
      this.$post(a).then((result) => {
        this.tableData = result.data
        that.totalCount = result.count
        if (this.tableData.length <= 0) {
          return
        }
        this.tableData.map((item, index) => {
          item.CreateTime = item.CreateTime
            ? item.CreateTime.replace('T', ' ').split('.')[0].toString()
            : ''
          item.rowId = index.toString()
          return item
        })
      })
    },
    handleOk() {
      if (!this.ButtonName) {
        this.$message.warn('Please enter the ButtonName')
        return
      } else if (!this.ButtonId && this.doType === 'add') {
        this.$message.warn('Please enter the ButtonId')
        return
      } else if (!this.ButtonDescribe) {
        this.$message.warn('Please enter the ButtonDescribe')
        return
      }
      if (this.doType === 'add') {
        this.addInfo()
      } else if (this.doType === 'edit') {
        this.editInfo()
      }
      this.modalVisiable = false
    },
  },
}
</script>

<style lang="less" scoped>
.w200 {
  width: 150px;
}
.main {
}
.ml50 {
  margin-left: 28px;
}
.headerInput {
  display: flex;
  width: 100%;
  align-items: center;
  .searchInputBox {
    input {
      width: 280px;
    }
  }
  .ml300 {
    margin-left: 180px;
  }
  .ml50 {
    margin-left: 28px;
  }
}
.tableSection {
  margin-top: 30px;
}

.pagination {
  margin-top: 38px;
  position: absolute;
  right: 100px;
}
</style>